<template>
    <div class="content"> 
        <div class="manage">
            <!-- 搜索 -->
            <div class="search">    
                <el-tooltip class="item" effect="dark" content="添加知识库" placement="top">
                    <el-button type="primary" plain @click="openknowledge(NaN)">添加</el-button>
                </el-tooltip>
            </div>    
            <!-- 主表格 -->
            <el-table :data="tableData" border>
                <el-table-column type="index" width="60" label="序号" />
                <el-table-column prop="name" label="知识库">
                </el-table-column>
                <el-table-column prop="description" label="描述">
                </el-table-column>
                <el-table-column prop="valid" label="有效">
                    <template #default="scope">
                        <el-switch v-model="isvalid[scope.row.valid]" />
                    </template>
                </el-table-column>
                <el-table-column prop="creator_name" label="创建人">
                </el-table-column>
                <el-table-column prop="create_datetime" label="创建时间">
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="300">
                    <template #default="scope">
                        <filelist :kgid="scope.row.id"/>                        
                        <el-button size="small" @click="opensetting(scope.row)">配置</el-button>
                        <el-button size="small" @click="openknowledge(scope.row)">编辑</el-button>
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="example-pagination-block">
              <el-pagination layout="prev, pager, next" :total="50" />
            </div>
            <!-- 添加 -->
            <el-dialog title="添加知识库" v-model="addDialogFormVisible">
                <el-form ref="kgForm" :model="addForm" label-width="50px">
                    <el-form-item label="名称">
                        <el-input v-model="addForm.name" placeholder="Please input" />
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="addForm.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="addDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addKnowledge(false)">确 定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!-- 修改 -->
            <el-dialog title="修改知识库" v-model="editDialogFormVisible">
                <el-form ref="kgForm" :model="editForm" label-width="50px">
                    <el-form-item label="名称">
                        <el-input v-model="editForm.name" placeholder="Please input" />
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="editForm.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="editDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addKnowledge(true)">确 定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!-- 配置 -->
            <el-dialog title="配置" v-model="propDialogFormVisible">
                <el-form ref="kgForm" :model="propForm" label-width="50px">
                    <el-form-item label="名称">
                        <el-input v-model="propForm.name" placeholder="Please input" />
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="propForm.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="propDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addKnowledge(true)">确 定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>    
</template>

<script lang="ts" setup> 
  import { ref , onMounted} from "vue";
  import { request } from "/@/utils/service";
  
  import filelist from "./filelist.vue";

  const addDialogFormVisible = ref(false);
  const editDialogFormVisible = ref(false);
  const propDialogFormVisible = ref(false);
  const tableData = ref([]);
  const addForm = ref({name: '', description: ''});
  const editForm = ref({id:0,name: '', description: ''}); 
  const propForm = ref({name: '', description: ''});

  const isvalid = ref({1: true, 0: false})
  const getKnowledge = () => {
    request({
        url: '/api/knowledge/knowledge_list/',
        method: 'get',
      })
      .then(res => {
        console.log(res.data);
        tableData.value = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  };

  const addKnowledge = (edit) => {
    let url = '/api/knowledge/knowledge_list/'
    let method = 'post';
    let formData = addForm.value;
    if (edit) {       
        url = url + editForm.value.id+'/'
        method = 'put';
        formData = editForm.value;
    }
    request({
        url: url,
        method: method,
        data: formData
      })
      .then(res => {
        getKnowledge();
        addDialogFormVisible.value = false;
      })
      .catch(err => {
        console.log(err);
      });
  };

  const handleDelete = (row) => {
    request({
        url: '/api/knowledge/knowledge_list/'+row.id+'/',
        method: 'delete',
      })
      .then(res => {
        getKnowledge();
      })
      .catch(err => {
        console.log(err);
      });
  };

  const opensetting = (row) => {
    propDialogFormVisible.value = true;
  };
  const openknowledge = (row) => {
    if (row) {
      editForm.value = row;
      editDialogFormVisible.value = true;
    }else {
      addForm.value.name = '';
      addForm.value.description = '';
      addDialogFormVisible.value = true;
    }
  };

  onMounted(() => {
    getKnowledge();
  });
</script>

<style lang="scss" scoped>
    .manage{
        padding: 20px;
        background: #ffffff;
        height: 100%;
        width: 100%;
        box-sizing:border-box;
        .search{
            margin-top: 20px;
            height: 60px;
            .s_right{
                float: right;
            }
        }
        .form{
            margin: 0 auto;
            width: 400px;
        }
        .page{
            float:right;
            margin-top:20px;
            height: 50px;
        }
    }

</style>
